var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({

    el: $('#paper'),
    width: 500,
    height: 300,
    gridSize: 20,
    perpendicularLinks: true,
    model: graph
});

// Initialize & render stencil.
// ----------------------------

var stencil = new joint.ui.Stencil({
    graph: graph,
    paper: paper,
    width: 200,
    height: 300
});
$('#stencil').append(stencil.render().el);

// Populate stencil.
// -----------------

var r = new joint.shapes.basic.Rect({ position: { x: 10, y: 10 }, size: { width: 50, height: 30 } });
var c = new joint.shapes.basic.Circle({ position: { x: 70, y: 10 }, size: { width: 50, height: 30 } });
var t = new joint.shapes.basic.Text({
    position: { x: 130, y: 10 }, size: { width: 50, height: 30 },
    attrs: { text: { text: 'Text' } }
});
var p = new joint.shapes.basic.Path({
    position: { x: 10, y: 50 }, size: { width: 50, height: 50 },
    attrs: {
        path: { d: 'M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466z M14.757,8h2.42v2.574h-2.42V8z M18.762,23.622H16.1c-1.034,0-1.475-0.44-1.475-1.496v-6.865c0-0.33-0.176-0.484-0.484-0.484h-0.88V12.4h2.662c1.035,0,1.474,0.462,1.474,1.496v6.887c0,0.309,0.176,0.484,0.484,0.484h0.88V23.622z' }
    }
});
var i = new joint.shapes.basic.Image({
    position: { x: 70, y: 50 },
    size: { width: 50, height: 50 },
    attrs: {
        image: { width: 50, height: 50, 'xlink:href': '' }
    }
});

stencil.load([r, c, t, p, i]);



// Stencil with groups
// -------------------


var graph2 = new joint.dia.Graph;

var paper2 = new joint.dia.Paper({

    el: $('#paper2'),
    width: 500,
    height: 300,
    gridSize: 20,
    perpendicularLinks: true,
    model: graph2
});

// Initialize & render stencil.
// ----------------------------

var stencil2 = new joint.ui.Stencil({
    graph: graph2,
    paper: paper2,
    width: 200,
    groups: {
        simple: { label: 'Simple', index: 1 },
        text: { label: 'Text', index: 2, closed: true },
        advanced: { label: 'Advanced', index: 3, closed: true }
    }
});
$('#stencil2').append(stencil2.render().el);

// Populate stencil.
// -----------------

var r2 = new joint.shapes.basic.Rect({ position: { x: 10, y: 10 }, size: { width: 50, height: 30 } });
var c2 = new joint.shapes.basic.Circle({ position: { x: 70, y: 10 }, size: { width: 50, height: 30 } });
var t2 = new joint.shapes.basic.Text({
    position: { x: 10, y: 10 }, size: { width: 50, height: 30 },
    attrs: { text: { text: 'Text' } }
});
var p2 = new joint.shapes.basic.Path({
    position: { x: 10, y: 10 }, size: { width: 50, height: 50 },
    attrs: {
        path: { d: 'M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466z M14.757,8h2.42v2.574h-2.42V8z M18.762,23.622H16.1c-1.034,0-1.475-0.44-1.475-1.496v-6.865c0-0.33-0.176-0.484-0.484-0.484h-0.88V12.4h2.662c1.035,0,1.474,0.462,1.474,1.496v6.887c0,0.309,0.176,0.484,0.484,0.484h0.88V23.622z' }
    }
});
var i2 = new joint.shapes.basic.Image({
    position: { x: 70, y: 10 },
    size: { width: 50, height: 50 },
    attrs: {
        image: { width: 50, height: 50, 'xlink:href': '' }
    }
});

stencil2.load([r2, c2], 'simple');
stencil2.load([t2], 'text');
stencil2.load([p2, i2], 'advanced');
